<html class="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;500;600;700;800;900&display=swap" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        window.FontAwesomeConfig = {
            autoReplaceSvg: 'nest', // Options: 'nest', 'remove', 'replace'
        };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


    <style>
        * {
            font-family: "Inter", sans-serif;
        }

        ::-webkit-scrollbar {
            display: none;
        }
    </style>


    <style>
        .highlighted-section {
            outline: 2px solid #3F20FB;
            background-color: rgba(63, 32, 251, 0.1);
        }

        .edit-button {
            position: absolute;
            z-index: 1000;
        }
    </style>


    <style>
        :root {
            /* Base colors */
            --color-base: #ffffff;
            --color-base-50: #f9fafb;
            --color-base-100: #f3f4f6;
            --color-base-200: #e5e7eb;
            --color-base-300: #d1d5db;
            --color-base-400: #9ca3af;
            --color-base-500: #6b7280;
            --color-base-600: #4b5563;
            --color-base-700: #374151;
            --color-base-800: #1f2937;
            --color-base-900: #111827;
            --color-base-content: #1f2937;

            /* Primary colors */
            --color-primary: #3b82f6;
            --color-primary-50: #eff6ff;
            --color-primary-100: #dbeafe;
            --color-primary-200: #bfdbfe;
            --color-primary-300: #93c5fd;
            --color-primary-400: #60a5fa;
            --color-primary-500: #3b82f6;
            --color-primary-600: #2563eb;
            --color-primary-700: #1d4ed8;
            --color-primary-800: #1e40af;
            --color-primary-900: #1e3a8a;
            --color-primary-focus: #2563eb;
            --color-primary-content: #ffffff;

            /* Secondary colors */
            --color-secondary: #8b5cf6;
            --color-secondary-50: #f5f3ff;
            --color-secondary-100: #ede9fe;
            --color-secondary-200: #ddd6fe;
            --color-secondary-300: #c4b5fd;
            --color-secondary-400: #a78bfa;
            --color-secondary-500: #8b5cf6;
            --color-secondary-600: #7c3aed;
            --color-secondary-700: #6d28d9;
            --color-secondary-800: #5b21b6;
            --color-secondary-900: #4c1d95;
            --color-secondary-focus: #7c3aed;
            --color-secondary-content: #ffffff;

            /* Accent colors */
            --color-accent: #f472b6;
            --color-accent-50: #fdf2f8;
            --color-accent-100: #fce7f3;
            --color-accent-200: #fbcfe8;
            --color-accent-300: #f9a8d4;
            --color-accent-400: #f472b6;
            --color-accent-500: #ec4899;
            --color-accent-600: #db2777;
            --color-accent-700: #be185d;
            --color-accent-800: #9d174d;
            --color-accent-900: #831843;
            --color-accent-focus: #db2777;
            --color-accent-content: #ffffff;

            /* Neutral colors */
            --color-neutral: #6b7280;
            --color-neutral-50: #f9fafb;
            --color-neutral-100: #f3f4f6;
            --color-neutral-200: #e5e7eb;
            --color-neutral-300: #d1d5db;
            --color-neutral-400: #9ca3af;
            --color-neutral-500: #6b7280;
            --color-neutral-600: #4b5563;
            --color-neutral-700: #374151;
            --color-neutral-800: #1f2937;
            --color-neutral-900: #111827;
            --color-neutral-focus: #4b5563;
            --color-neutral-content: #ffffff;

            /* Info colors */
            --color-info: #3b82f6;
            --color-info-50: #eff6ff;
            --color-info-100: #dbeafe;
            --color-info-200: #bfdbfe;
            --color-info-300: #93c5fd;
            --color-info-400: #60a5fa;
            --color-info-500: #3b82f6;
            --color-info-600: #2563eb;
            --color-info-700: #1d4ed8;
            --color-info-800: #1e40af;
            --color-info-900: #1e3a8a;
            --color-info-focus: #2563eb;
            --color-info-content: #ffffff;

            /* Success colors */
            --color-success: #10b981;
            --color-success-50: #ecfdf5;
            --color-success-100: #d1fae5;
            --color-success-200: #a7f3d0;
            --color-success-300: #6ee7b7;
            --color-success-400: #34d399;
            --color-success-500: #10b981;
            --color-success-600: #059669;
            --color-success-700: #047857;
            --color-success-800: #065f46;
            --color-success-900: #064e3b;
            --color-success-focus: #059669;
            --color-success-content: #ffffff;

            /* Warning colors */
            --color-warning: #f59e0b;
            --color-warning-50: #fffbeb;
            --color-warning-100: #fef3c7;
            --color-warning-200: #fde68a;
            --color-warning-300: #fcd34d;
            --color-warning-400: #fbbf24;
            --color-warning-500: #f59e0b;
            --color-warning-600: #d97706;
            --color-warning-700: #b45309;
            --color-warning-800: #92400e;
            --color-warning-900: #78350f;
            --color-warning-focus: #d97706;
            --color-warning-content: #ffffff;

            /* Error colors */
            --color-error: #ef4444;
            --color-error-50: #fef2f2;
            --color-error-100: #fee2e2;
            --color-error-200: #fecaca;
            --color-error-300: #fca5a5;
            --color-error-400: #f87171;
            --color-error-500: #ef4444;
            --color-error-600: #dc2626;
            --color-error-700: #b91c1c;
            --color-error-800: #991b1b;
            --color-error-900: #7f1d1d;
            --color-error-focus: #dc2626;
            --color-error-content: #ffffff;
        }
    </style>


    <style>
        /* Dark theme */
        .dark {
            /* Base colors */
            --color-base: #1f2937;
            --color-base-50: #111827;
            --color-base-100: #1f2937;
            --color-base-200: #374151;
            --color-base-300: #4b5563;
            --color-base-400: #6b7280;
            --color-base-500: #9ca3af;
            --color-base-600: #d1d5db;
            --color-base-700: #e5e7eb;
            --color-base-800: #f3f4f6;
            --color-base-900: #f9fafb;
            --color-base-content: #f9fafb;

            /* Primary colors */
            --color-primary: #60a5fa;
            --color-primary-50: #1e3a8a;
            --color-primary-100: #1e40af;
            --color-primary-200: #1d4ed8;
            --color-primary-300: #2563eb;
            --color-primary-400: #3b82f6;
            --color-primary-500: #60a5fa;
            --color-primary-600: #93c5fd;
            --color-primary-700: #bfdbfe;
            --color-primary-800: #dbeafe;
            --color-primary-900: #eff6ff;
            --color-primary-focus: #3b82f6;
            --color-primary-content: #1f2937;

            /* Secondary colors */
            --color-secondary: #a78bfa;
            --color-secondary-50: #4c1d95;
            --color-secondary-100: #5b21b6;
            --color-secondary-200: #6d28d9;
            --color-secondary-300: #7c3aed;
            --color-secondary-400: #8b5cf6;
            --color-secondary-500: #a78bfa;
            --color-secondary-600: #c4b5fd;
            --color-secondary-700: #ddd6fe;
            --color-secondary-800: #ede9fe;
            --color-secondary-900: #f5f3ff;
            --color-secondary-focus: #8b5cf6;
            --color-secondary-content: #1f2937;

            /* Accent colors */
            --color-accent: #f472b6;
            --color-accent-50: #831843;
            --color-accent-100: #9d174d;
            --color-accent-200: #be185d;
            --color-accent-300: #db2777;
            --color-accent-400: #ec4899;
            --color-accent-500: #f472b6;
            --color-accent-600: #f9a8d4;
            --color-accent-700: #fbcfe8;
            --color-accent-800: #fce7f3;
            --color-accent-900: #fdf2f8;
            --color-accent-focus: #ec4899;
            --color-accent-content: #1f2937;

            /* Neutral colors remain the same as light theme */

            /* Info colors */
            --color-info: #60a5fa;
            --color-info-50: #1e3a8a;
            --color-info-100: #1e40af;
            --color-info-200: #1d4ed8;
            --color-info-300: #2563eb;
            --color-info-400: #3b82f6;
            --color-info-500: #60a5fa;
            --color-info-600: #93c5fd;
            --color-info-700: #bfdbfe;
            --color-info-800: #dbeafe;
            --color-info-900: #eff6ff;
            --color-info-focus: #3b82f6;
            --color-info-content: #1f2937;

            /* Success colors */
            --color-success: #34d399;
            --color-success-50: #064e3b;
            --color-success-100: #065f46;
            --color-success-200: #047857;
            --color-success-300: #059669;
            --color-success-400: #10b981;
            --color-success-500: #34d399;
            --color-success-600: #6ee7b7;
            --color-success-700: #a7f3d0;
            --color-success-800: #d1fae5;
            --color-success-900: #ecfdf5;
            --color-success-focus: #10b981;
            --color-success-content: #1f2937;

            /* Warning colors */
            --color-warning: #fbbf24;
            --color-warning-50: #78350f;
            --color-warning-100: #92400e;
            --color-warning-200: #b45309;
            --color-warning-300: #d97706;
            --color-warning-400: #f59e0b;
            --color-warning-500: #fbbf24;
            --color-warning-600: #fcd34d;
            --color-warning-700: #fde68a;
            --color-warning-800: #fef3c7;
            --color-warning-900: #fffbeb;
            --color-warning-focus: #f59e0b;
            --color-warning-content: #1f2937;

            /* Error colors */
            --color-error: #f87171;
            --color-error-50: #7f1d1d;
            --color-error-100: #991b1b;
            --color-error-200: #b91c1c;
            --color-error-300: #dc2626;
            --color-error-400: #ef4444;
            --color-error-500: #f87171;
            --color-error-600: #fca5a5;
            --color-error-700: #fecaca;
            --color-error-800: #fee2e2;
            --color-error-900: #fef2f2;
            --color-error-focus: #ef4444;
            --color-error-content: #1f2937;
        }
    </style>


    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ...{"transparent":"transparent","current":"currentColor","black":"#000000","white":"#ffffff","gray":{"50":"#f9fafb","100":"#f3f4f6","200":"#e5e7eb","300":"#d1d5db","400":"#9ca3af","500":"#6b7280","600":"#4b5563","700":"#374151","800":"#1f2937","900":"#111827"},"red":{"50":"#fef2f2","100":"#fee2e2","200":"#fecaca","300":"#fca5a5","400":"#f87171","500":"#ef4444","600":"#dc2626","700":"#b91c1c","800":"#991b1b","900":"#7f1d1d"},"yellow":{"50":"#fffbeb","100":"#fef3c7","200":"#fde68a","300":"#fcd34d","400":"#fbbf24","500":"#f59e0b","600":"#d97706","700":"#b45309","800":"#92400e","900":"#78350f"},"green":{"50":"#ecfdf5","100":"#d1fae5","200":"#a7f3d0","300":"#6ee7b7","400":"#34d399","500":"#10b981","600":"#059669","700":"#047857","800":"#065f46","900":"#064e3b"},"blue":{"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"},"indigo":{"50":"#eef2ff","100":"#e0e7ff","200":"#c7d2fe","300":"#a5b4fc","400":"#818cf8","500":"#6366f1","600":"#4f46e5","700":"#4338ca","800":"#3730a3","900":"#312e81"},"purple":{"50":"#f5f3ff","100":"#ede9fe","200":"#ddd6fe","300":"#c4b5fd","400":"#a78bfa","500":"#8b5cf6","600":"#7c3aed","700":"#6d28d9","800":"#5b21b6","900":"#4c1d95"},"pink":{"50":"#fdf2f8","100":"#fce7f3","200":"#fbcfe8","300":"#f9a8d4","400":"#f472b6","500":"#ec4899","600":"#db2777","700":"#be185d","800":"#9d174d","900":"#831843"}},
                        ...{"primary":{"50":"var(--color-primary-50)","100":"var(--color-primary-100)","200":"var(--color-primary-200)","300":"var(--color-primary-300)","400":"var(--color-primary-400)","500":"var(--color-primary-500)","600":"var(--color-primary-600)","700":"var(--color-primary-700)","800":"var(--color-primary-800)","900":"var(--color-primary-900)","DEFAULT":"var(--color-primary)","focus":"var(--color-primary-focus)","content":"var(--color-primary-content)"},"secondary":{"50":"var(--color-secondary-50)","100":"var(--color-secondary-100)","200":"var(--color-secondary-200)","300":"var(--color-secondary-300)","400":"var(--color-secondary-400)","500":"var(--color-secondary-500)","600":"var(--color-secondary-600)","700":"var(--color-secondary-700)","800":"var(--color-secondary-800)","900":"var(--color-secondary-900)","DEFAULT":"var(--color-secondary)","focus":"var(--color-secondary-focus)","content":"var(--color-secondary-content)"},"accent":{"50":"var(--color-accent-50)","100":"var(--color-accent-100)","200":"var(--color-accent-200)","300":"var(--color-accent-300)","400":"var(--color-accent-400)","500":"var(--color-accent-500)","600":"var(--color-accent-600)","700":"var(--color-accent-700)","800":"var(--color-accent-800)","900":"var(--color-accent-900)","DEFAULT":"var(--color-accent)","focus":"var(--color-accent-focus)","content":"var(--color-accent-content)"},"neutral":{"50":"var(--color-neutral-50)","100":"var(--color-neutral-100)","200":"var(--color-neutral-200)","300":"var(--color-neutral-300)","400":"var(--color-neutral-400)","500":"var(--color-neutral-500)","600":"var(--color-neutral-600)","700":"var(--color-neutral-700)","800":"var(--color-neutral-800)","900":"var(--color-neutral-900)","DEFAULT":"var(--color-neutral)","focus":"var(--color-neutral-focus)","content":"var(--color-neutral-content)"},"info":{"50":"var(--color-info-50)","100":"var(--color-info-100)","200":"var(--color-info-200)","300":"var(--color-info-300)","400":"var(--color-info-400)","500":"var(--color-info-500)","600":"var(--color-info-600)","700":"var(--color-info-700)","800":"var(--color-info-800)","900":"var(--color-info-900)","DEFAULT":"var(--color-info)","focus":"var(--color-info-focus)","content":"var(--color-info-content)"},"success":{"50":"var(--color-success-50)","100":"var(--color-success-100)","200":"var(--color-success-200)","300":"var(--color-success-300)","400":"var(--color-success-400)","500":"var(--color-success-500)","600":"var(--color-success-600)","700":"var(--color-success-700)","800":"var(--color-success-800)","900":"var(--color-success-900)","DEFAULT":"var(--color-success)","focus":"var(--color-success-focus)","content":"var(--color-success-content)"},"warning":{"50":"var(--color-warning-50)","100":"var(--color-warning-100)","200":"var(--color-warning-200)","300":"var(--color-warning-300)","400":"var(--color-warning-400)","500":"var(--color-warning-500)","600":"var(--color-warning-600)","700":"var(--color-warning-700)","800":"var(--color-warning-800)","900":"var(--color-warning-900)","DEFAULT":"var(--color-warning)","focus":"var(--color-warning-focus)","content":"var(--color-warning-content)"},"error":{"50":"var(--color-error-50)","100":"var(--color-error-100)","200":"var(--color-error-200)","300":"var(--color-error-300)","400":"var(--color-error-400)","500":"var(--color-error-500)","600":"var(--color-error-600)","700":"var(--color-error-700)","800":"var(--color-error-800)","900":"var(--color-error-900)","DEFAULT":"var(--color-error)","focus":"var(--color-error-focus)","content":"var(--color-error-content)"},"danger":{"50":"var(--color-error-50)","100":"var(--color-error-100)","200":"var(--color-error-200)","300":"var(--color-error-300)","400":"var(--color-error-400)","500":"var(--color-error-500)","600":"var(--color-error-600)","700":"var(--color-error-700)","800":"var(--color-error-800)","900":"var(--color-error-900)","DEFAULT":"var(--color-error)","focus":"var(--color-error-focus)","content":"var(--color-error-content)"},"failure":{"50":"var(--color-error-50)","100":"var(--color-error-100)","200":"var(--color-error-200)","300":"var(--color-error-300)","400":"var(--color-error-400)","500":"var(--color-error-500)","600":"var(--color-error-600)","700":"var(--color-error-700)","800":"var(--color-error-800)","900":"var(--color-error-900)","DEFAULT":"var(--color-error)","focus":"var(--color-error-focus)","content":"var(--color-error-content)"}},
                    },
                },
            },
            variants: {
                extend: {
                    backgroundColor: ['active', 'group-hover'],
                    textColor: ['active', 'group-hover'],
                },
            },
            plugins: [],
        };
    </script>

</head>

<body class="h-full text-base-content">
<!-- Header -->
<header id="header" class="fixed w-full bg-white/95 backdrop-blur-sm shadow-sm z-50">
    <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa-solid fa-code-branch text-[#C5D83F] text-3xl"></i>
            <span class="text-xl font-semibold text-[#1F3A2E]">Eurasia Assignment</span>
        </div>

        <div class="hidden lg:flex items-center space-x-8">
            <span class="text-gray-600 hover:text-[#1F3A2E] cursor-pointer">功能亮点</span>
            <span class="text-gray-600 hover:text-[#1F3A2E] cursor-pointer">应用场景</span>
            <span class="text-gray-600 hover:text-[#1F3A2E] cursor-pointer">定价方案</span>
            <span class="text-gray-600 hover:text-[#1F3A2E] cursor-pointer">帮助中心</span>
        </div>

        <div class="flex items-center space-x-4">
            <span class="text-[#1F3A2E] hover:text-[#C5D83F] cursor-pointer">登录</span>
            <span class="bg-[#C5D83F] text-[#1F3A2E] px-6 py-2 rounded-lg hover:bg-[#b3c536] transition cursor-pointer">注册</span>
        </div>
    </nav>
</header>

<!-- Hero Section -->
<section id="hero" class="relative h-[800px] flex items-center">
    <img class="absolute inset-0 w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/e5bd52eb93-19bf6e176dd4552ea1f5.png" alt="modern university campus with students coding on laptops, bright daylight, blurred background" />
    <div class="absolute inset-0 bg-black/40"></div>

    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-3xl">
            <h1 class="text-5xl font-bold text-white mb-6">欧亚项目共享与在线编程平台</h1>
            <p class="text-xl text-gray-200 mb-8 leading-relaxed">
                轻松发布和接收项目，实现高效协作<br>
                智能在线判题系统，即时反馈代码质量<br>
                一站式竞赛管理，打造专业编程社区
            </p>
            <div class="flex space-x-4">
                <span class="bg-[#C5D83F] text-[#1F3A2E] px-8 py-3 rounded-lg text-lg font-medium hover:bg-[#b3c536] transition cursor-pointer">立即注册</span>
                <span class="bg-white/20 text-white px-8 py-3 rounded-lg text-lg font-medium hover:bg-white/30 transition cursor-pointer">了解更多</span>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-[#1F3A2E] mb-16">核心功能一览</h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Feature 1 -->
            <div id="feature-1" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
                <div class="w-12 h-12 bg-[#C5D83F]/20 rounded-lg flex items-center justify-center mb-4">
                    <i class="fa-solid fa-rocket text-[#C5D83F] text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">项目广场</h3>
                <p class="text-gray-600 mb-4">发布接单系统，全生命周期项目管理，让协作更简单</p>
                <span class="text-[#1F3A2E] hover:text-[#C5D83F] flex items-center cursor-pointer">
          了解详情 <i class="fa-solid fa-arrow-right ml-2"></i>
        </span>
            </div>

            <!-- Feature 2 -->
            <div id="feature-2" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
                <div class="w-12 h-12 bg-[#C5D83F]/20 rounded-lg flex items-center justify-center mb-4">
                    <i class="fa-solid fa-code text-[#C5D83F] text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">在线判题 OJ</h3>
                <p class="text-gray-600 mb-4">海量编程题库，实时评测系统，助力编程能力提升</p>
                <span class="text-[#1F3A2E] hover:text-[#C5D83F] flex items-center cursor-pointer">
          了解详情 <i class="fa-solid fa-arrow-right ml-2"></i>
        </span>
            </div>

            <!-- Feature 3 -->
            <div id="feature-3" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
                <div class="w-12 h-12 bg-[#C5D83F]/20 rounded-lg flex items-center justify-center mb-4">
                    <i class="fa-solid fa-trophy text-[#C5D83F] text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">竞赛管理</h3>
                <p class="text-gray-600 mb-4">一键创建竞赛，自动评分排名，打造专业竞技平台</p>
                <span class="text-[#1F3A2E] hover:text-[#C5D83F] flex items-center cursor-pointer">
          了解详情 <i class="fa-solid fa-arrow-right ml-2"></i>
        </span>
            </div>

            <!-- Feature 4 -->
            <div id="feature-4" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
                <div class="w-12 h-12 bg-[#C5D83F]/20 rounded-lg flex items-center justify-center mb-4">
                    <i class="fa-solid fa-users text-[#C5D83F] text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">团队协作</h3>
                <p class="text-gray-600 mb-4">实时讨论，文档共享，项目进度追踪一目了然</p>
                <span class="text-[#1F3A2E] hover:text-[#C5D83F] flex items-center cursor-pointer">
          了解详情 <i class="fa-solid fa-arrow-right ml-2"></i>
        </span>
            </div>
        </div>
    </div>
</section>

<!-- Use Cases Section -->
<section id="use-cases" class="py-20">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-[#1F3A2E] mb-16">应用场景</h2>

        <div class="grid lg:grid-cols-3 gap-8">
            <!-- Case 1 -->
            <div id="case-1" class="rounded-xl overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/bc2f97b734-b9da1572ce82e5c03511.png" alt="students collaborating on coding project in modern classroom" />
                <div class="p-6 bg-white shadow-sm">
                    <h3 class="text-xl font-semibold mb-3">学生协作开发</h3>
                    <p class="text-gray-600">轻松组队，在线协作，代码版本管理，让团队开发更高效</p>
                </div>
            </div>

            <!-- Case 2 -->
            <div id="case-2" class="rounded-xl overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/eab35ac738-46a448996cd8ad774880.png" alt="professor reviewing code with students in computer lab" />
                <div class="p-6 bg-white shadow-sm">
                    <h3 class="text-xl font-semibold mb-3">教师批阅作业</h3>
                    <p class="text-gray-600">自动判题系统，快速批阅，数据分析助力教学提升</p>
                </div>
            </div>

            <!-- Case 3 -->
            <div id="case-3" class="rounded-xl overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/e0d3699417-c53bfcc163e20b5fae89.png" alt="coding competition with students focused on computers" />
                <div class="p-6 bg-white shadow-sm">
                    <h3 class="text-xl font-semibold mb-3">竞赛实时排名</h3>
                    <p class="text-gray-600">在线竞赛系统，实时排名，营造良性竞争氛围</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Statistics Banner -->
<section id="statistics" class="py-16 bg-[#1F3A2E]">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8 text-center">
            <div id="stat-1" class="text-white">
                <div class="text-4xl font-bold mb-2">10,000+</div>
                <div class="text-gray-300">注册用户</div>
            </div>
            <div id="stat-2" class="text-white">
                <div class="text-4xl font-bold mb-2">5,000+</div>
                <div class="text-gray-300">发布项目</div>
            </div>
            <div id="stat-3" class="text-white">
                <div class="text-4xl font-bold mb-2">200,000+</div>
                <div class="text-gray-300">代码评测</div>
            </div>
            <div id="stat-4" class="text-white">
                <div class="text-4xl font-bold mb-2">150+</div>
                <div class="text-gray-300">竞赛场次</div>
            </div>
        </div>
    </div>
</section>


<!-- Featured Projects Section -->
<section id="featured-projects" class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-[#1F3A2E] mb-16">优秀项目展播</h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Project 1 -->
            <div id="project-1" class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden">
                <div class="h-48 overflow-hidden">
                    <img class="w-full h-full object-cover"
                         src="https://storage.googleapis.com/uxpilot-auth.appspot.com/a858e18edb-acd5cfcd9339a0b7ae7f.png"
                         alt="modern web application interface dashboard with data visualization, professional design"/>
                </div>
                <div class="p-6">
                    <div class="flex items-center space-x-2 mb-4">
                        <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg"
                             class="w-8 h-8 rounded-full"/>
                        <span class="text-gray-600">张明</span>
                        <span class="text-[#C5D83F] text-sm">已完成</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">智能校园管理系统</h3>
                    <p class="text-gray-600 mb-4">基于 React 的现代化校园管理平台，包含数据可视化、实时通知等功能</p>
                    <div class="flex items-center justify-between">
                        <div class="flex space-x-2">
                            <span class="px-2 py-1 bg-gray-100 rounded text-sm">React</span>
                            <span class="px-2 py-1 bg-gray-100 rounded text-sm">Node.js</span>
                        </div>
                        <i class="fa-regular fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
                    </div>
                </div>
            </div>

            <!-- Project 2 -->
            <div id="project-2" class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden">
                <div class="h-48 overflow-hidden">
                    <img class="w-full h-full object-cover"
                         src="https://storage.googleapis.com/uxpilot-auth.appspot.com/758a7200e1-1e5315c211e49ad9c40b.png"
                         alt="mobile app screens showing educational content and quizzes, clean interface"/>
                </div>
                <div class="p-6">
                    <div class="flex items-center space-x-2 mb-4">
                        <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg"
                             class="w-8 h-8 rounded-full"/>
                        <span class="text-gray-600">李华</span>
                        <span class="text-[#C5D83F] text-sm">已完成</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">在线学习助手</h3>
                    <p class="text-gray-600 mb-4">Flutter开发的跨平台教育应用，支持课程管理、在线测验等功能</p>
                    <div class="flex items-center justify-between">
                        <div class="flex space-x-2">
                            <span class="px-2 py-1 bg-gray-100 rounded text-sm">Flutter</span>
                            <span class="px-2 py-1 bg-gray-100 rounded text-sm">Firebase</span>
                        </div>
                        <i class="fa-regular fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
                    </div>
                </div>
            </div>

            <!-- Project 3 -->
            <div id="project-3" class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden">
                <div class="h-48 overflow-hidden">
                    <img class="w-full h-full object-cover"
                         src="https://storage.googleapis.com/uxpilot-auth.appspot.com/01d0cc04e5-c6928ee0ea34484579e7.png"
                         alt="AI powered chatbot interface with natural language processing features"/>
                </div>
                <div class="p-6">
                    <div class="flex items-center space-x-2 mb-4">
                        <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg"
                             class="w-8 h-8 rounded-full"/>
                        <span class="text-gray-600">王强</span>
                        <span class="text-[#C5D83F] text-sm">已完成</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">智能问答机器人</h3>
                    <p class="text-gray-600 mb-4">基于Python的AI助手，集成自然语言处理，支持多场景应用</p>
                    <div class="flex items-center justify-between">
                        <div class="flex space-x-2">
                            <span class="px-2 py-1 bg-gray-100 rounded text-sm">Python</span>
                            <span class="px-2 py-1 bg-gray-100 rounded text-sm">TensorFlow</span>
                        </div>
                        <i class="fa-regular fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section id="cta" class="py-20 bg-gray-50">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-[#1F3A2E] mb-6">加入我们，快速提升编程能力</h2>
        <p class="text-xl text-gray-600 mb-8">开始你的第一个项目，体验专业的编程学习平台</p>
        <span class="inline-block bg-[#C5D83F] text-[#1F3A2E] px-8 py-3 rounded-lg text-lg font-medium hover:bg-[#b3c536] transition cursor-pointer">立即注册</span>
    </div>
</section>

<!-- Footer -->
<footer id="footer" class="bg-[#1F3A2E] text-white py-12">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8 mb-8">
            <div id="footer-about">
                <h4 class="text-lg font-semibold mb-4">关于我们</h4>
                <ul class="space-y-2">
                    <li><span class="text-gray-300 hover:text-white cursor-pointer">平台介绍</span></li>
                    <li><span class="text-gray-300 hover:text-white cursor-pointer">团队成员</span></li>
                    <li><span class="text-gray-300 hover:text-white cursor-pointer">加入我们</span></li>
                </ul>
            </div>

            <div id="footer-help">
                <h4 class="text-lg font-semibold mb-4">帮助中心</h4>
                <ul class="space-y-2">
                    <li><span class="text-gray-300 hover:text-white cursor-pointer">使用指南</span></li>
                    <li><span class="text-gray-300 hover:text-white cursor-pointer">常见问题</span></li>
                    <li><span class="text-gray-300 hover:text-white cursor-pointer">联系支持</span></li>
                </ul>
            </div>

            <div id="footer-legal">
</body>
</html>
